// GUI管理器 - 专门处理用户界面
import { GUI } from 'dat.gui'
import { EVENTS } from '../config/constants.js'

export class GUIManager {
  constructor() {
    this.gui = null
    this.folders = new Map()
    this.controllers = new Map()
    this.eventListeners = new Map()
  }

  create() {
    if (this.gui) {
      this.destroy()
    }
    
    this.gui = new GUI()
    return this.gui
  }

  addFolder(name, parent = null) {
    const parentFolder = parent || this.gui
    const folder = parentFolder.addFolder(name)
    this.folders.set(name, folder)
    return folder
  }

  addController(folder, object, property, options = {}) {
    let controller
    
    if (options.type === 'color') {
      controller = folder.addColor(object, property)
    } else if (options.options) {
      controller = folder.add(object, property, options.options)
    } else if (options.min !== undefined && options.max !== undefined) {
      controller = folder.add(object, property, options.min, options.max)
      if (options.step) {
        controller.step(options.step)
      }
    } else {
      controller = folder.add(object, property)
    }

    if (options.name) {
      controller.name(options.name)
    }

    if (options.onChange) {
      controller.onChange(options.onChange)
    }

    const key = `${folder.name || 'root'}.${property}`
    this.controllers.set(key, controller)
    
    return controller
  }

  addButton(folder, name, callback) {
    const buttonObj = { [name]: callback }
    return folder.add(buttonObj, name)
  }

  updateOptions(controllerKey, newOptions) {
    const controller = this.controllers.get(controllerKey)
    if (controller && controller.__select) {
      // 更新下拉选项
      const select = controller.__select
      select.innerHTML = ''
      
      newOptions.forEach(option => {
        const optionElement = document.createElement('option')
        optionElement.value = option
        optionElement.textContent = option
        select.appendChild(optionElement)
      })
    }
  }

  addEventListener(event, callback) {
    if (!this.eventListeners.has(event)) {
      this.eventListeners.set(event, [])
    }
    this.eventListeners.get(event).push(callback)
  }

  emit(event, data) {
    const listeners = this.eventListeners.get(event)
    if (listeners) {
      listeners.forEach(callback => callback(data))
    }
  }

  destroy() {
    if (this.gui) {
      this.gui.destroy()
      this.gui = null
      this.folders.clear()
      this.controllers.clear()
    }
  }

  // 便捷方法：创建文件上传控件
  createFileUpload(folder, name, accept, callback) {
    const input = document.createElement('input')
    input.type = 'file'
    input.accept = accept
    input.style.display = 'none'
    
    input.addEventListener('change', (event) => {
      const file = event.target.files[0]
      if (file && callback) {
        callback(file)
      }
    })
    
    document.body.appendChild(input)
    
    const buttonObj = { [name]: () => input.click() }
    return folder.add(buttonObj, name)
  }
}